<template>
  <div class="energy-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <div class="title-box">冷水机对比</div>
      <section class="top-main">
        <div class="energy-conservation">
          <div class="title-little-box">冷水机运行</div>
        </div>
        <div class="equipment-operation">
          <div class="title-little-box">冷水机能耗</div>
        </div>
      </section>

      <section class="center-main">
        <div class="energy-analysis panel1">
          <div class="inner1">
            <!-- <div class="top-echart">
              <div class="cold-img"></div>
            </div> -->
            <div class="bottom-echart myscroll">
              <div v-for="(item, index) in listData" :key="index">
                <Coldcard :dataItem="item" />
              </div>
            </div>
          </div>
        </div>
        <div class="report-table panel1">
          <div class="inner1">
            <div class="table-option">
              <div class="table-data-box myscroll">
                <div
                  class="items-list"
                  v-for="(item, index) in ColdWatercopData"
                  :key="index"
                >
                  <div
                    class="item1"
                    v-for="(chitem, index) in item.list"
                    :key="index"
                  >
                    <ChartItem
                      class="option"
                      :title="chitem.name"
                      :datas="chitem.value"
                      :type="chitem.type"
                      :times="item.time"
                    ></ChartItem>
                  </div>
                </div>
              </div>
              <div class="option-check">
                <span class="time_text">时间选择</span>
                <el-date-picker
                  class="date-picker"
                  @change="dateChange"
                  :picker-options="pickerOptions"
                  v-model="dataNow"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
                <div class="confirm_select" @click="confirmQuery">查询</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import Coldcard from "./Coldcard";
import ChartItem from "./Chartitem";
import { getLastWeekArr } from "../../utils/mytime.js";
export default {
  name: "ColdwatercompareComponent",
  props: ["listData", "ColdWatercopData"],
  components: {
    Coldcard,
    ChartItem,
  },
  data() {
    return {
      dataNow: getLastWeekArr(),
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.choiceDate !== "") {
            const one = 6 * 24 * 3600 * 1000;
            const minTime = this.choiceDate - one;
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() > Date.now() - 8.64e7 ||
              time.getTime() < minTime ||
              time.getTime() > maxTime
            );
          } else {
            return time.getTime() > Date.now() - 8.64e7;
          }
        },
      },
    };
  },

  methods: {
    dateChange(v) {
      this.$emit("ChangeDate", v);
    },
    confirmQuery() {
      this.$emit("ConfirmQuery");
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
.energy-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    .title-box {
      position: absolute;
      font-weight: bold;
      top: 10px;
      left: 0;
      font-size: 22px;
      color: #ffffff;
      text-align: center;
      width: 220px;
      height: 44px;
      line-height: 44px;
      background: url("../../assets/img/ti.png") no-repeat center;
      background-size: cover;
    }
    .top-main {
      width: 100%;
      height: 10%;
      display: flex;
      .energy-conservation {
        width: 45%;
        height: 100%;
      }
      .equipment-operation {
        width: 55%;
        height: 100%;
        padding-right: 8%;
      }
    }
    .center-main {
      width: 100%;
      height: 88%;
      display: flex;
      justify-content: space-around;
      //   background-color: #fff;
      .energy-analysis {
        width: 36%;
        height: 100%;
        // background-color: #84bfdd;
        font-size: 20px;
        color: #fff;
        .top-echart {
          width: 100%;
          height: 25%;
        }
        .bottom-echart {
          width: 100%;
          height: 100%;
          // background: salmon;
          overflow: hidden;
          overflow-y: auto;
        }
      }
      .report-table {
        width: 62%;
        height: 100%;
        color: #fff;
        font-size: 20px;
        .table-option {
          // background-color: #3276d6;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .table-data-box {
            width: 100%;
            height: 90%;
            overflow: hidden;
            overflow-y: auto;
            // display: flex;
            // flex-direction: column;
            .items-list {
              width: 100%;
              height: 300px;
              display: flex;
              // &:nth-child(2n) {
              //   background: cadetblue;
              // }
              // &:nth-child(2n-1) {
              //   background: rgb(160, 126, 95);
              // }
              .item1 {
                width: 100%;
                height: 300px;
                // padding: 6px 8px;
              }
              .item2 {
                width: 100%;
                height: 100%;
                padding: 6px 5px;
                // background: rgb(172, 10, 85);
              }
            }
          }
          .option-check {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #050f23;
            user-select: none;
            .date-picker {
              height: 44px;
              background-color: #091c37;
              border: 1px solid #0a73b1;
              color: #28c2ff !important;
              /deep/ .el-range-input {
                background-color: #091c37;
                color: #28c2ff;
              }
            }
            .time_text {
              margin: 0 40px;
              font-size: 18px;
              color: #0fd3e8;
            }
            .confirm_select {
              cursor: pointer;
              margin: 0 40px;
              width: 130px;
              height: 44px;
              background: #0fd3e8;
              border-radius: 6px;
              text-align: center;
              line-height: 44px;
              font-size: 16px;
              font-weight: bold;
              color: #243d74;
            }
          }
        }
      }
    }

    .title-little-box {
      width: 680px;
      font-size: 28px;
    }
  }
}
</style>
